<template>
  <div>

	  <myheader></myheader>

	  <br /><br />

	  <Breadcrumb :datas="datas"></Breadcrumb>
	
	<section class="featured-block text-center">
		<div class="container">
		
			<div>
				<!-- <Avatar :src='photo' alt="" :width='150' height=""></Avatar> -->
				<br>
				<Avatar :src='src' :width='150' fit='fill'></Avatar>
				<Avatar :src='qiniu_src' :width='150' fit='fill'></Avatar>
				
			</div>
			<br>
			<div>
				<!-- 初步实现页面展示视频,音乐 -->
          		<!-- <video :src="video" autoplay controls  width="60%" height="60%"></video><br> -->
    
				<!-- <audio :src="music" autoplay controls></audio> --> -->
				<!-- 初步实现页面展示视频,音乐 -->

				<center>
					<p>
						修改密码: <input type="text" name="password" v-model="password">
					</p>
					<p>
						本地后台上传文件: <input type="file"  @change="upload">
						
						<br>
						<br>

						{{ imgload }}

						七牛云端上传文件: <input type="file" @change="upload_qiniu" >

						<br><br>

						<Button color='blue' @click="submit">提交修改</Button>
					</p>
				</center>
			</div>

			
		</div>
	</section>
	
	<mufooter></mufooter>

  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';


export default {
  data () {
    return {
		//声明面包屑导航变量
		datas:[{title:"首页",route:{name:'index'}},{title:'我的主页',route:{name:'register'}}],
		
		src:'',
		uptoken:'',
		qiniu_src:'',
		music:'',
		video:'',
		//进度展示
		imgload:'',
		mysrc:'',
		password:'',

		//头像展示
		// photo:'',

	}
  },
  //定义组件
  components:{
	  'myheader':myheader,
	  'mufooter':myfooter
	},
  mounted:function(){
	  
	  //获取用户信息
	  this.get_userinfo();

	  //测试方法
	  this.get_token();
	  
	//   //个人主页头像查找
	//   this.axios.get('http://localhost:8000/userimg/',{params:{uid:localStorage.getItem('uid')}})
	// 	    .then((result) =>{
	// 			console.log(result.data.img);
	// 			this.photo = 'http://localhost:8000/static/upload/'+result.data.img;
	// 			// this.$Message(result.data.img)
				
	// 	  	})


},
  methods:{

	  //获取用户信息
	  get_userinfo:function(){
		  //发送请求获取
		  this.axios.get('http://localhost:8000/userinfo/',{params:{uid:localStorage.getItem('uid')}})
		    .then((result) =>{
				console.log(result.data);

				this.src = 'http://localhost:8000/static/upload/'+result.data.img
				// this.$Message(result.data.img)
				
		  	})
	  },

	  //提交用户修改
	  submit:function(){
		  this.axios.get('http://localhost:8000/updateuser/',{params:{uid:localStorage.getItem('uid')
		  ,img:this.mysrc,password:this.password}})
		    .then((result) =>{
				console.log(result.data);
				console.log(result.data.img);
				
				this.$Message(result.data.message)
				
		  	})


	  },

	  //上传七牛云
	  upload_qiniu:function(e){


		  //声明文件对象
		  let file = e.target.files[0];
		  //声明参数类型
		  let param = new FormData();
		  //添加文件
		  param.append('file',file);
		  param.append('token',this.uptoken);
		  
		  //定制axios请求
		  const axios_qiniu = this.axios.create({withCredentials:false});

		  //利用定制的方式发送请求
		  axios_qiniu({
			  method:"post",
			  url:'http://up-z1.qiniu.com/',
			  data:param,
			  timeout:30000,
			  //上传进度捕捉方法
			  		//下载进度:onDownload
			  onUploadProgress:(e)=>{
				  //上传成功部分除以整个的部分
				  //计算下载进度
				  var complete = (e.loaded / e.total)

				  //判断
				  if(complete < 1){
					  this.imgload = ( complete * 100).toFixed(2) + '%';
				  }

			  }

		  }).then((result)=>{

			  console.log(result.data);

			  //请求结束设置为100%
			  this.imgload = '100%';
			  this.qiniu_src = 'http://q690i25l0.bkt.clouddn.com/'+result.data.key;

			  

			  //初步实现七牛云视频,音乐

			  if(result.data.filename.split('.').pop()=='mp3'){
					this.music = 'http://q690i25l0.bkt.clouddn.com/'+result.data.key;

					this.$Message('音频文件上传成功');
				}

				if(result.data.filename.split('.').pop()=='mp4'){
					this.video = 'http://q690i25l0.bkt.clouddn.com/'+result.data.key;

					this.$Message('视频文件上传成功');
				
				}

			  //初步实现七牛云视频,音乐
			
		  })

	  },

	  //获取令牌方法
	  get_token(){
		  //向后台发送请求
			this.axios.get('http://localhost:8000/uptoken/')
		    .then((result) =>{
				console.log(result);
				//动态赋值
				this.uptoken = result.data.uptoken
		  	})
	  },

	  //定义一个上传方法
	  upload:function(e){
		  //声明文件对象
		  let file = e.target.files[0];
		  //声明参数类型
		  let param = new FormData();
		  //添加文件
		  param.append('file',file);
		  //声明上传文件头部
		  let config = {'Content-Type':'multipart/form-data'};

			//向后台发送请求
			this.axios.post('http://localhost:8000/uploadfile/',param,config)
		    .then((result) =>{
				console.log(result);
				//动态赋值
				this.src = 'http://localhost:8000/static/upload/'+result.data.filename;
	
				this.mysrc = result.data.filename;
				
				// this.$Message('本地文件上传成功');

				//初步实现本地后台上传视频,音乐
				if(result.data.filename.split('.').pop()=='mp3'){
					this.music = 

					this.$Message('音频文件上传成功');
				}

				if(result.data.filename.split('.').pop()=='mp4'){
					this.video = 'http://localhost:8000/static/upload/'+result.data.filename;

					this.$Message('视频文件上传成功');
				
				}
				
				//初步实现本地后台上传视频,音乐
			  	// this.$Message(result.data.message);
		  	})


	  }

	//   //上传图片点击事件
	//   submit:function(){
	// 	//声明文件对象 
	// 	var file = this.$refs.file.files[0];
	// 	//图片展示
	// 	this.imgurl = URL.createObjectURL(file);
	// 	//声明参数(创建formdata)
	// 	var formdata = new FormData();
	// 	//将文件添加到formdata中
	// 	formdata.append('file',file,file.name);

	// 	var config = {
	// 		headers: {'Content-Type':'multipart/form_data'}

	// 	}
		
	// 	var this_ = this;

	// 	//提交事件
	//  	this.axios.post(
	// 		 'http://localhost:8000/uploadfile/',
	// 		 formdata,
	// 		 config,
	// 	 ).then((result)=>{
	// 		 console.log(result);
	// 		 alert(this.imgurl)
	// 		 this_.$Message("提交成功");

	// 	 })
     

	  
	  
  }
}


</script>
 
<style>



</style>